<template>
  <div>
    <a-form style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item
        label="反馈类别"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
        required
      >
        <a-select
          v-model="selected"
          placeholder="请选择"
        >
          <a-select-option value="1">分类部分</a-select-option>
          <a-select-option value="2">商品部分</a-select-option>
          <a-select-option value="3">订单部分</a-select-option>
          <a-select-option value="4">其他</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :wrapperCol="{span: 17, offset: 7}">
        <a-button
          type="primary"
          @click="nextStep"
        >下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'Step1',
  data() {
    return {
      selected: '',
    }
  },
  methods: {
    nextStep() {
      if (this.selected == '') {
        this.$message.warn('请选择类别');
        return
      }
      this.$emit('nextStep', this.selected)
    }
  }
}
</script>

<style scoped>
</style>
